/**
 * 蒙版组件
 * @param {string} src1 - 第一张图片URL
 * @param {string} src2 - 第二张图片URL
 * @param {string} src3 - 第三张图片URL
 */
class Mask {
    constructor(src1, src2, src3) {
        this.src1 = src1;
        this.src2 = src2;
        this.src3 = src3;
        this.maskElement = null;
    }

    // 初始化并渲染窗口
    init() {
        document.body.style.margin = '0';
        document.body.style.padding = '0';
        document.body.style.fontFamily = 'Arial, sans-serif';

        // 创建蒙版元素
        this.maskElement = this.createEle('div', {'class': 'mask'}, {
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'width': '100%',
            'height': '100%',
            'background-color': 'rgba(0, 0, 0, 0.85)',
            'z-index': '1000',
            'display': 'flex',
            'justify-content': 'center',
            'align-items': 'center'
        }, document.body);

        // 点击蒙版外部关闭
        this.maskElement.onclick = (e) => {
            if (e.target === this.maskElement) {
                this.close();
            }
        };

        // ESC键关闭
        document.onkeydown = (e) => {
            if (e.key === 'Escape') {
                this.close();
            }
        };

        // 创建内容容器
        let maskContent = this.createEle('div', {'class': 'mask-content'}, {
            'position': 'relative',
            'background-color': 'white',
            'padding': '20px',
            'border-radius': '5px',
            'width': '900px',
            'height': '300px',
            'box-shadow': '0 0 10px rgba(0, 0, 0, 0.3)'
        }, this.maskElement);

        // 关闭按钮
        let closeBtn = this.createEle('button', {'class': 'close-btn'}, {
            'position': 'absolute',
            'top': '10px',
            'right': '10px',
            'cursor': 'pointer',
            'font-size': '20px',
            'background': 'none',
            'border': 'none',
            'padding': '10px 20px'
        }, maskContent);
        closeBtn.innerHTML = '&times;';
        closeBtn.addEventListener('click', () => this.close());

        // 主要内容区域 - 修正了CSS动画问题
        let main = this.createEle('div', {'class': 'main'}, {
            'width': '100%',
            'height': '100%',
            'background': 'linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)',
            'background-size': '400% 400%',
            'animation': 'gradientBG 15s ease infinite',
            'text-shadow': '0 0 10px rgba(0,0,0,0.3)',
            'display': 'flex',
            'flex-direction': 'column',
            'justify-content': 'center',
            'align-items': 'center'
        }, maskContent);

        // 添加CSS动画关键帧
        const style = document.createElement('style');
        style.textContent = `
            @keyframes gradientBG {
                0% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
                100% { background-position: 0% 50%; }
            }
        `;
        document.head.appendChild(style);

        // 图片容器
        let mainImgs = this.createEle('div', {'class': 'main-imgs'}, {
            'display': 'flex',
            'justify-content': 'space-around',
            'width': '100%',
            'padding': '20px'
        }, main);

        // 添加三张图片
        [this.src1, this.src2, this.src3].forEach(src => {
            if (src) {
                let imgContainer = this.createEle('div', {'class': 'main-img'}, {
                    'width': '250px',
                    'height': '250px',
                    'display': 'flex',
                    'justify-content': 'center',
                    'align-items': 'center',
                    'overflow': 'hidden',
                    'background': 'rgba(255,255,255,0.3)',
                    'border-radius': '8px'
                }, mainImgs);

                this.createEle('img', {'src': src}, {
                    'max-width': '100%',
                    'max-height': '100%',
                    'object-fit': 'contain'
                }, imgContainer);
            }
        });
    }

    // 关闭蒙版
    close() {
        if (this.maskElement && this.maskElement.parentNode) {
            document.body.removeChild(this.maskElement);
            document.onkeydown = null;
        }
        this.maskElement = null;
    }

    // 创建元素的方法
    createEle(nodeName, attributes, styles, parent = null) {
        let target = document.createElement(nodeName);
        // 设置属性
        for (let attr in attributes) {
            if (attributes.hasOwnProperty(attr)) {
                target.setAttribute(attr, attributes[attr]);
            }
        }
        // 设置样式
        for (let style in styles) {
            if (styles.hasOwnProperty(style)) {
                target.style[style] = styles[style];
            }
        }
        // 添加到父节点
        if (parent) {
            parent.appendChild(target);
        }
        return target;
    }
}

// 使用示例
// const myMask = new Mask('image1.jpg', 'image2.jpg', 'image3.jpg');
// myMask.init();